<template>
  <div class="card" :class="{
    'highlight': card.isHighlighted,
    'changing': card.isChanging,
    'special-horizontal': card.specialType === 'horizontal',
    'special-vertical': card.specialType === 'vertical',
    'special-joker': card.specialType === 'joker',
    'special-bomb': card.specialType === 'bomb',
    //新增冰冻卡片类
    'special-freeze': card.specialType === 'freeze'  
  }" @click="handleClick">
    <div class="shape" :style="{ color: suitColor }">
      {{ suitSymbol }}
    </div>
    <div v-if="card.specialType !== 'none'" class="special-badge">
      {{ specialBadgeText }}
    </div>
    <div v-if="card.isFrozen" class="freeze-overlay">❄</div>
  </div>
</template>

<script setup>
import { defineProps, defineEmits, computed } from 'vue'
import { getSuitColor, getSuitSymbol } from "@/utils/cardUtils";

const props = defineProps({
  card: {
    type: Object,
    required: true,
    default: () => ({
      row: 0,
      col: 0,
      suit: '',
      isHighlighted: false,
      isChanging: false,
      isMatched: false,
      specialType: 'none'
    })
  }
})

const emit = defineEmits(['click'])

const handleClick = () => {
  emit('click', props.card.row, props.card.col)
}

const suitSymbol = computed(() => getSuitSymbol(props.card.suit))
const suitColor = computed(() => getSuitColor(props.card.suit))

const specialBadgeText = computed(() => {
  switch(props.card.specialType) {
    case 'horizontal': return '→';
    case 'vertical': return '↓';
    case 'joker': return '🤡';
    case 'bomb': return '💣';
    case 'freeze': return '❄';  // 新增冰冻卡片标记
    default: return '';
  }
})
</script>

<style scoped>
.card {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #ffffff 0%, #ffffff 100%);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.2s;
  position: relative;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.card:hover {
  transform: scale(0.95);
}

.shape {
  font-size: 24px;
  font-weight: bold;
}

.highlight {
  box-shadow: 0 0 8px 2px gold;
  z-index: 10;
}

.changing {
  animation: changeShape 0.3s ease;
}

@keyframes changeShape {
  0% { transform: scale(1); }
  50% { transform: scale(0.8); opacity: 0.7; }
  100% { transform: scale(1); opacity: 1; }
}

.special-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: gold;
  color: black;
  font-weight: bold;
}

.special-horizontal {
  background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
  box-shadow: 0 0 12px rgba(0, 255, 255, 0.6), inset 0 0 0 2px cyan;
}

.special-vertical {
  background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
  box-shadow: 0 0 12px rgba(0, 255, 0, 0.6), inset 0 0 0 2px lime;
}

.special-joker {
  background: linear-gradient(135deg, #ff0099 0%, #493240 100%);
  box-shadow: 0 0 12px rgba(255, 0, 255, 0.6), inset 0 0 0 2px magenta;
}

.special-bomb {
  background: linear-gradient(135deg, #110e00 0%, #ffffff 100%);
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.8), inset 0 0 0 2px black;
}

.special-freeze {
  background: linear-gradient(135deg, #fcfdfd 0%, #f9f9f9 100%);
  box-shadow: 0 0 12px rgba(0, 191, 255, 0.6), inset 0 0 0 2px deepskyblue;
}

.freeze-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 32px;
  color: rgba(255, 255, 255, 0.8);
  text-shadow: 0 0 8px rgba(0, 191, 255, 0.8);
  z-index: 5;
}
</style>